<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" th:src="@{/asserts/scripts/vue2.7.14.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style rel="stylesheet" th:href="@{/asserts/styles/global.css}"></style>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <style>
        #app>div {
            margin-top: 20px;
        }
    </style>

</head>
<body>
    <div id="app">
        <div>
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <el-breadcrumb separator=">>">
                        <el-breadcrumb-item><a href="./home.html" target="_blank">首页</a></el-breadcrumb-item>
                        <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
                        <el-breadcrumb-item>菜单列表</el-breadcrumb-item>
                    </el-breadcrumb>
                </div></el-col>
            </el-row>
        </div>

        <div>
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <el-form :inline="true" class="demo-form-inline" size="small">
                        <el-form-item label="菜单名称">
                            <el-input v-model="name" placeholder="菜单名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" @click="addView" size="small">添加菜单</el-button>
                    <el-button type="danger" @click="addView" size="small">批量删除</el-button>
                </div></el-col>
            </el-row>
        </div>

        <div style="width: 85%">
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <el-table
                            :data="permissionList"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                type="selection"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="菜单名称"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="url"
                                label="url地址"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="parentName"
                                label="父菜单"
                                width="180">
                        </el-table-column>

                        <el-table-column
                                label="菜单类型"
                                width="180">
                            <template slot-scope="scope">
                                <span v-text="scope.row.urlType=='1'?'菜单权限':'接口权限'"></span>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="edit(scope.row.id)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="del(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div></el-col>
            </el-row>
        </div>


        <div>
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[3, 6, 12, 24]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div></el-col>
            </el-row>
        </div>


        <!--编辑对话框-->
        <el-dialog title="修改菜单" :visible.sync="editPermissionDialogFormVisible" @clsoe="canceleditPermission" :close-on-click-modal="false">
            <el-form :model="editPermission" ref="editPermissionRefForm" :rules="editPermissionRulesForm">
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="editPermission.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单Url" :label-width="formLabelWidth">
                    <el-input v-model="editPermission.url" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单类型" :label-width="formLabelWidth">
                    <el-select v-model="editPermission.urlType" placeholder="请选择菜单类型">
                        <el-option label="菜单权限" value="1"></el-option>
                        <el-option label="接口权限" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="父菜单" :label-width="formLabelWidth">
                    <el-select v-model="editPermission.parentId" placeholder="请选择父菜单">
                        <el-option label="父菜单" :value="-1"></el-option>
                        <el-option v-for="p in parentMenuList" :label="p.name" :value="p.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="canceleditPermission">取 消</el-button>
                <el-button type="primary" @click="modifyPermission">确 定</el-button>
            </div>
        </el-dialog>

        <!--添加对话框-->
        <el-dialog title="添加菜单" :visible.sync="addPermissionDialogFormVisible" @clsoe="cancelAddPermission" :close-on-click-modal="false">
            <el-form :model="addPermission" ref="addPermissionRefForm" :rules="addPermissionRulesForm">
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="addPermission.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单Url" :label-width="formLabelWidth">
                    <el-input v-model="addPermission.url" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单类型" :label-width="formLabelWidth">
                    <el-select v-model="addPermission.urlType" placeholder="请选择菜单类型">
                        <el-option label="菜单权限" value="1"></el-option>
                        <el-option label="接口权限" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="父菜单" :label-width="formLabelWidth">
                    <el-select v-model="addPermission.parentId" placeholder="请选择父菜单">
                        <el-option label="父菜单" value="-1"></el-option>
                        <el-option v-for="p in parentMenuList" :label="p.name" :value="p.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAddPermission">取 消</el-button>
                <el-button type="primary" @click="savePermission">确 定</el-button>
            </div>
        </el-dialog>

    </div>

    <script>
        let vueApp = new Vue({
            el:"#app",
            data:{
                name:'',
                permissionList:[],
                pageNum:1,
                pageSize:3,
                total:0,
                addPermissionDialogFormVisible:false,
                formLabelWidth:'120px',
                addPermission:{
                    name:'',
                    url:'',
                    urlType:'1',
                    parentId:'-1'
                },
                addPermissionRulesForm:{
                    name:[
                        {required:true,message: "菜单不能为空",trigger:'blur'}
                    ]
                },
                parentMenuList:[],
                editPermission:{
                    id:'',
                    name:'',
                    url:'',
                    urlType:'1',
                    parentId:'-1'
                },
                editPermissionRulesForm:{
                    name:[
                        {required:true,message: "菜单不能为空",trigger:'blur'}
                    ]
                },
                editPermissionDialogFormVisible:false,
            },
            methods:{
                //保存修改
                modifyPermission(){
                    this.$refs["editPermissionRefForm"].validate((valid)=>{
                        if (!valid) return ;
                        let url = "./permission/edit"
                        axios.put(url,this.editPermission).then((res)=>{
                            if (res.data.code == 200){
                                this.$message({
                                    type:"success",
                                    message:res.data.message,
                                    duration:1000
                                });
                                this.editPermissionDialogFormVisible = false ;
                                this.loadPermission();//刷新本页面
                                this.loadAllparentMenu(); //刷新父菜单
                            }else {
                                this.$message({
                                    type:"error",
                                    message:res.data.message,
                                    duration:1000
                                });
                            }
                        })
                    })
                },
                //关闭修改对话框
                canceleditPermission(){
                    this.editPermissionDialogFormVisible = false ;
                },
                //保存菜单
                savePermission(){
                    this.$refs["addPermissionRefForm"].validate((valid)=>{
                        if (!valid) return ;
                        let url = "./permission/add"
                        axios.post(url,this.addPermission).then((res)=>{
                            if (res.data.code == 200){
                                this.$message({
                                    type:"success",
                                    message:res.data.message,
                                    duration:1000
                                });
                                this.$refs["addPermissionRefForm"].resetFields();
                                this.addPermissionDialogFormVisible = false ;
                                this.loadPermission();//刷新本页面
                                this.loadAllparentMenu(); //刷新父菜单
                            }else {
                                this.$message({
                                    type:"error",
                                    message:res.data.message,
                                    duration:1000
                                });
                            }
                        })
                    })
                },
                //关闭添加菜单对话框
                cancelAddPermission(){
                    this.$refs["addPermissionRefForm"].resetFields();
                    this.addPermissionDialogFormVisible = false ;
                },
                //打开添加菜单对话框
                addView(){
                    this.addPermissionDialogFormVisible = true ;
                },
                //改变每页现实条数
                handleSizeChange(size){
                    this.pageSize = size;
                    this.pageNum = 1;
                    this.loadPermission();
                },
                //改变当前页
                handleCurrentChange(now){
                    this.pageNum = now;
                    this.loadPermission();
                },
                //打开编辑菜单对话框
                edit(id){
                    let url = "./permission/getPermissionByKey/"+id; //restful参数传递
                    axios.get(url).then((res)=>{
                        if (res.data.code == 200) {
                            this.editPermission = res.data.data;
                            this.editPermissionDialogFormVisible = true ;
                        }else {
                            this.$message({
                                type:"error",
                                message:res.data.message,
                                duration:1000
                            });
                        }
                    })
                },
                //删除菜单
                del(id){
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let  url = "./permission/delPermissionByKey/"+id ;
                        axios.delete(url).then((res)=>{
                            if (res.data.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: res.data.message,
                                    duration:1000
                                });
                                this.loadPermission();//刷新本页面
                                this.loadAllparentMenu(); //刷新父菜单
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: res.data.message,
                                    duration:1000
                                });
                            }
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                //搜索菜单
                search(){
                    this.pageNum = 1;
                    this.loadPermission();
                },
                //加载菜单数据
                loadPermission(){
                    let url = './permission/list' ;
                    axios.get(url,{
                        params: {
                            'name':this.name,
                            'now':this.pageNum,
                            'size':this.pageSize
                        }
                    }).then((res)=>{
                        if (res.data.code == 200) {
                            this.permissionList = res.data.data.list ;
                            this.pageNum = res.data.data.pageNum;
                            this.pageSize = res.data.data.pageSize;
                            this.total = res.data.data.total ;
                        }else {
                            this.$message({
                                type:"error",
                                message:res.data.message,
                                duration:1000
                            });
                        }
                    })
                },
                //加载所有的父菜单
                loadAllparentMenu(){
                    let url = './permission/getAllParentMenu' ;
                    axios.get(url).then((res)=>{
                        if (res.data.code == 200) {
                            this.parentMenuList = res.data.data ;
                        }else {
                            this.$message({
                                type:"error",
                                message:res.data.message,
                                duration:1000
                            });
                        }
                    })
                }
            },
            created(){
                //预加载菜单数据
                this.loadPermission();
                this.loadAllparentMenu();
            }
        });
    </script>
</body>
</html>